import React, { useState } from 'react'
import { Layout, Dropdown, Menu, Avatar } from 'antd'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined
} from '@ant-design/icons';
// 高阶路由组件，谁用他谁就能够拥有里所有的属性
import { withRouter } from 'react-router-dom'

const { Header } = Layout

function TopHeader(props) {
    const [collapsed, setCollapsed] = useState(false)
    const changeCollapsed = () => {
        setCollapsed(!collapsed)
    }

    const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))

    const menu = (
        <Menu>
            <Menu.Item>
                {roleName}
            </Menu.Item>
            <Menu.Item danger onClick={() => {
                localStorage.removeItem("token")
                console.log(props);
                props.history.replace("/login")
            }}>退出</Menu.Item>
        </Menu>
    );
    return (
        // <Layout>
        <Header className="site-layout-background" style={{ padding: "0 16px" }}>
            <div style={{ float: "right" }}>
                <span>欢迎<b className="loginShow">{username}</b>回来 </span>
                <Dropdown overlay={menu}>
                    <Avatar size="large" icon={<UserOutlined />} />
                </Dropdown>
            </div>
            {
                collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
            }
        </Header>
        // </Layout>
    )
}
export default withRouter(TopHeader)

